<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>

<!--
表单提交事件，通过onsubmit绑定一个提交检测的函数，true，false
将这个结果返回给表单，使用onsubmit接收！
-->

<form action="XX" method="post" onsubmit="return check()">
  <p>
<!--required 作用：不能为null--为了提示用户输入对点，减轻服务器压力-->
    <span>用户名：</span><input type="text" id="username">
  </p>
  <p>
    <span>密码：</span><input type="password" id="input-password">
  </p>
  <input type="hidden" id = "md5-password" name="password">
    <!--绑定事件  onclick 被点击事件-->
  <button type="submit">提交</button>
</form>

<script>
  'use strict';

  function check(){
    var uname = document.getElementById("username");
    var pwd = document.getElementById("input-password");
    var md5Pwd = document.getElementById('md5-password');

    // md5算法
    md5Pwd.value=md5(pwd.value);
    // 可以校验判断表单内容：true就是通过提交，false阻止提交
    return true;
  }
</script>
</body>
</html>